/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer, filter} from '../../renderer';
import Html from '../../../widgets/html';


@Renderer({
  name: 'field-html',
  desc: '...',
  test:  /(?:^|\/)field\/(?:html|tpl|map)$/
})
export default class HTMLField extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    type: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    innerClassName: PropTypes.string
  };

  static defaultProps = {
    placeholder: `-`,
    innerClassName: ''
  };

  render() {
    const {
      value,
      map,
      tpl,
      item,
      data,
      placeholder,
      className,
      $path
    } = this.props;

    const type = $path.split('/').pop();
    let viewValue = (type === 'map' ? filter(map && (map[value] || map['*']), item || data) : type === 'tpl' ? filter(tpl, item) : value);

    let body = typeof viewValue === 'number' || viewValue ? String(viewValue) : placeholder && `<span class="text-muted">${placeholder}</span>`;

    return (
      <Html className={className} html={String(body)} />
    );
  }
}
